<!--  -->
<template>
  <div id="iframe" ref="iframe" class="ik-iframe">
    <div class="ik-iframe-menus">
      <span :style="{color:'#409EFF','margin-left':'10px'}">
        <span class="svg-container ik-info-icon">
          <svg-icon icon-class="file" />
        </span>
        {{ title }}
      </span>
      <div class="ik-iframe-icons">
        <i v-if="!isscreen" class="el-icon-full-screen" @click="openScreen" />
        <i v-else class="el-icon-copy-document" @click="closeScreen" />
        <i class="el-icon-close" @click="closeIframe()" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'IkIframe',
  components: {},
  props: {
    title: {
      type: String,
      default: '请选择'
    },
    code: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      isscreen: false
    }
  },
  computed: {

  },
  watch: {
  },
  created() {

  },
  mounted() {

  },

  methods: {
    // 关闭
    closeIframe() {
      this.$emit('closeIframe', this.code)
    },
    // 全屏
    openScreen() {
      this.isscreen = true
      this.$refs.iframe.style.height = '100%'
      this.$refs.iframe.style.width = '100%'
      this.$refs.iframe.style.top = 0
      this.$refs.iframe.style.left = 0
    },
    // 非全屏
    closeScreen() {
      this.$refs.iframe.style.height = 'calc(100% - 100px)'
      this.$refs.iframe.style.width = 'calc(100% - 100px)'
      this.$refs.iframe.style.top = '50px'
      this.$refs.iframe.style.left = '50px'
      this.isscreen = false
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep.ik-iframe{
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  // height: 80%;
  z-index: 10000;
  left: 50px;
  top: 50px;
  position: fixed;
  border: 1px solid #ebeef5;
  box-shadow: 0 5px 12px 0 rgba(0,0,0,0.1);
  .ik-iframe-menus{
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    background-color: white;
    border-bottom: 1px solid #409EFF;
    .ik-iframe-icons{
      width: auto;
      position: absolute;
      right: 0;
      height: 100%;
      top: 0;
      i{
        margin: 8px;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  .ik-iframe-content{
    height: calc(100% - 40px);
    width: 100%;
    position: relative;
    border: none;
  }
}
// .ik-iframe-content{
//     height: calc(100% - 40px);
//     width: 100%;
//     position: relative;
  // }
</style>
<style >
/* .ik-iframe-content{
    height: calc(100% - 40px);
    width: 100%;
    position: relative;
  } */
</style>
